<template>
  <div class="tabs">
    <el-tag
        @click="handleClick(item)"
        @close="handleClose(item)"
        :type="isActive(item) ? 'success' : ''"
        closable class="tab"
        v-for="item in tabs"
        :key="item.path">{{item.label}}
    </el-tag>
  </div>
</template>

<script>
import {mapState} from "vuex"

export default {
  name: "Tabs",
  computed: {
    ...mapState(['tabs']),
  },
  watch:{
    $route(route) {
      this.$store.dispatch("openMenuItem", {
        path:route.fullPath,
        label: route.meta.name
      })
    }
  },
  methods: {
    isActive(item) {
      return this.$route.fullPath === item.path
    },
    handleClick(item) {
      this.$router.push(item.path)
    },
    handleClose(item) {
      this.$store.dispatch("closeMenuItem", {
        path: item.path,
        isActive: this.isActive(item)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.tabs{
  display: flex;
  background-color: white;
  padding: 1rem;
  .tab {
    width: 20rem;
    text-align: center;
    margin-right: 1rem;
    cursor: pointer;
  }
}
</style>